<template>
      <div class="songList">
            <div class="play">
                <span ><i class="iconfont icon-bofang"></i>播放全部</span>
            </div>
                    
             <div class="list">
                <div class="name">
                    <span class="id">序号</span>
                    <span class="song">歌曲</span>
                    <span class="singer">歌手</span>
                    <span class="album">专辑</span>
                    <span class="time">时长</span>
                </div>
                <div class="song" v-for="(l,i) in toSongs" :key="i">
                    <span class="id">{{i+1}}</span>
                    <span class="song" @click="playSong(l)">{{l.name}} <span class="vip" v-show="l.isVip==1">VIP</span> </span>
                    <span class="singer">
                        <span v-for="(art,j) in l.ar" :key="j" :class="{add:j < l.ar.length - 1 && l.ar.length > 1}">{{art.name}}</span>
                    </span>
                    <span class="album">《{{l.al.name}}》</span>
                    <span class="time">{{getTime(l.dt)}}</span>
                </div>
            </div>
  <aplayer :audio="audio" :lrcType="1"  ref="aplayer"/>
        </div>
</template>

<script>

export default {
   props:{
       toSongs:{
           type:Array
       }
   },
    data() {
        return {
            info: '',
            song: '',
            total: '',
            pageSize: 50,
              audio: {
        name: '东西（Cover：林俊呈）',
        artist: '纳豆',
        url: 'https://cdn.moefe.org/music/mp3/thing.mp3',
        cover: 'https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=300y300', // prettier-ignore
        lrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',
      },
        }
    },
    created(){
        this.getInfo(this.$route.params.id)
        this.getSong(this.$route.params.id,1)
    },
    methods: {
        getTime(time){
            var m = Math.floor(time/60000)
            var minute = m > 10 ? m : '0' + m
            var second = time - 60000*m >= 10 ? time - 60000*m : '0' + (time - 60000*m)
            second= second.toString().slice(0, 2)  //  将数字转换成 字符串截取 前两位数字
            return minute + ':' + second
        },
        changePage(page){
            this.$router.push(`/singer/${this.$route.params.id}/?pageNo=${page}`)
            this.getSong(this.$route.params.id,page)
        },
        getInfo(id){
            this.axios.get(`https://music.taihe.com/v1/artist/info?artistCode=${id}`).then((res) => {
                this.info = res.data.data
            })
        },
        getSong(id,page){
            this.axios.get(`https://music.taihe.com/v1/artist/song?artistCode=${id}&pageNo=${page}&pageSize=${this.pageSize}`).then((res) => {
                this.song = res.data.data.result
                this.total = res.data.data.total
            })
        },
         playSong(songInfo) {
      var songUrl = ''
      let songId = songInfo.id
      let url = `https://autumnfish.cn/song/url?id=${songId}`
      let lrcUrl = `https://autumnfish.cn/lyric?id=${songId}`
      this.axios.get(url).then((res) => {
        songUrl = res.data.data[0].url
        this.axios.get(lrcUrl).then((res) => {
            let songLrc = ''
            if(res.data.nolyric){
                  songLrc=''
            }else {
                  songLrc = res.data.lrc.lyric
            }
            console.log();
          this.audio = {
            name: songInfo.name,
            artist: songInfo.ar[0],
            url: songUrl,
            cover: songInfo.al.picUrl, // prettier-ignore
            lrc: songLrc,
          }
        })
      })
      this.$refs.aplayer.play();
    },

    },
}
</script>

<style scoped>
  .songList .play{
        width: 100px;
        text-align: center;
        background-color: red;
        color: #fff;
        padding: 10px 20px;
        border-radius: 20px;
        margin-bottom: 20px;
        cursor: pointer;
    }
    .songList .play i{
        margin: 6px;
    }

    .songList .list{
        display: flex;
        flex-direction: column;
    }


    .songList .list .song .singer span.add::after{
        content: "/";
        font-weight: bold;
        display: inline-block;
        font-size: 20px;
        padding: 0 6px;
        position: relative;
        top: 1px;
    }


    .songList .list div.song:hover{
        background-color: #e8e9ed;
    }
    .songList .list div.song .song:hover,
    .songList .list div.song .singer span:hover,
    .songList .list div.song .album:hover{
        color: red;
    } 
    .songList .list span{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .songList .list div{
        padding: 15px 10px;
        display: flex;
        justify-content: space-between;
        cursor: pointer;
    }

    .songList .list div .id{
        width: 5%;
    }
    .songList .list div .song{
        width: 30%;
    }
    .songList .list div .singer{
        width: 26%;
        padding-left: 20px;
    }
    .songList .list div .album{
        width: 34%;
    }
    .songList .list div .time{
        width: 9%;
    }

    .songList .list .song span{
        color: #303133;
    }

    .songList .list div .vip{
        background: #af9c7c;
        color: #fff;
        padding: 0 3px;
        border-radius: 3px;
        margin-left: 6px;
        font-size: 12px;
    }
    .songList .list .name{
        color: #909399;
    }
    .songList .list div:nth-child(2n+1){
        background-color: #f7f7f7;
    }

    .el-pagination{
        display: flex;
        justify-content: center;
        padding-top: 50px;
    }
</style>